import React from 'react'
import style from './style'
import cx from 'classnames'
import { Spinner } from '../'

class Nav extends React.Component {

	static propsType = {
		item: React.PropTypes.func.required,
		data: React.PropTypes.array.required
	}

	renderList = (list, i) => {
		if (!list.length) return null
		return (
			<ul key={i}>{ list.map(this.renderItem) }</ul>
		)
	} 

	renderItem = (v, i) => 
		<li className={style.item} key={i}>{ this.props.item({...v, active: style.active, index: i}) }</li>

	render() {
		const { icon, className, data, item, ...others } = this.props
		return (
			<div 
        {...others}
				className={cx({
					[className]: !!className,
					[style.root]: true,
					[style.icon]: icon
				})}
			>
        { data.map(this.renderList) }
        { this.props.children }
			</div>
		)
	}
}

export default Nav
